<template>
  <van-row style="margin-top:10px">
    <van-row>
      <van-form @submit="onSubmit">
        <van-row>
          <van-col span="24">
            <van-field v-model.trim="email" name="email" label="邮箱" placeholder="请输入邮箱"
              :rules="[{ required: true, message: '请填写邮箱地址' }]" />
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24">
            <van-field v-model.trim="code"  :maxlength="5" center clearable
              label="邮箱验证码" placeholder="请输入邮箱验证码" :rules="[{ required: true, message: '请填写邮箱验证码' }]">
              <template #button>
                <van-button size="small" type="primary" :loading="codeLoading" @click="onSendEmail"
                  native-type="button">发送验证码</van-button>
              </template>
            </van-field>
          </van-col>
        </van-row>
        <van-row style="margin-top:10px">
          <van-col span="24">
            <van-button round block plain hairline type="primary" native-type="submit" :loading="nextLoading">下一步
            </van-button>
          </van-col>
        </van-row>
       
      </van-form>
    </van-row>
  </van-row>
</template>
<script>
  import {
    Row,
    Col,
    Field,
    Button,
    Step,
    Steps,
    Form,
    Toast,
    NavBar,
  } from 'vant'
  export default {
    components: {
      'van-row': Row,
      'van-col': Col,
      'van-field': Field,
      'van-button': Button,
      'van-form': Form,
      'van-nav-bar': NavBar,
    },
    data: function () {
      return {
        email: '', //邮箱地址
        code: '', //验证码
        nextLoading: false, //下一步按钮的加载
        codeLoading: false, //验证码的按钮加载
      }
    },
    props: {
      onSuccess: {
        type: Function,
        required: true
      }
    },
    methods: {
      //提交
      async onSubmit() {
        this.nextLoading = true;
        var res = await this.$ajax.post('/api/user/code/check', {
          email: this.email,
          code: this.code
        });

        this.nextLoading = false;
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          this.onSuccess({
              email:this.email,
              active:1
          });
        }
      },
      //发送验证码
      async onSendEmail() {
        this.codeLoading = true;
        var res = await this.$ajax.post('/api/user/code', {
          email: this.email
        });
        this.codeLoading = false;
        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          Toast.success('邮件已发送请注意查收');
        }

      },
    },
    mounted() {}
  }

</script>
